@import 'icons';
@import 'mixins';
@import 'themes';
@import 'utilities';

html, body {
  height: 100%;
}

body {
  font-size: 18px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
}

.iconfont {
  line-height: 1;
}

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.text-lg {
  font-size: 120%;
}

:root {
  --header-height: 60px;
}

.header {
  --header-padding-y: 0;
  --header-bg-rgb: 255, 255, 255;
  --header-bg-opacity: 1;
  --header-color: #222;
  --header-logo-size: 34px;
  --header-link-spacer-x: 0;
  --header-search-pane-min-width: 80%;
  --header-search-pane-max-width: unset;
  --header-search-pane-spacer: 10px;
  --header-search-pane-margin-x: 20px;
  --header-search-pane-padding-x: 20px;
  --header-search-pane-padding-y: 16px;
  --header-search-pane-border-radius: 12px;

  padding: var(--header-padding-y) 0;
  background-color: rgba(var(--header-bg-rgb), var(--header-bg-opacity));
  transition: background-color .3s ease-in-out;

  &-translucent {
    --header-color: #fff;
    --header-bg-opacity: 0;
  }

  .navbar-brand > img {
    display: block;
    height: var(--header-logo-size);
  }

  .navbar {
    --bs-navbar-color: var(--header-color);
    --bs-navbar-hover-color: var(--header-color);
    --bs-navbar-active-color: var(--header-color);
  }

  .navbar-text {
    color: var(--header-color);
  }

  .nav-link {
    margin: 0 var(--header-link-spacer-x);

    &.active {
      font-weight: bold;
    }
  }

  .navbar-text:hover,
  .nav-link:hover {
    font-weight: bold;
  }

  .search-dropdown {
    position: static;

    .dropdown-menu {
      --bs-dropdown-spacer: var(--header-search-pane-spacer);
      --bs-dropdown-padding-x: var(--header-search-pane-padding-x);
      --bs-dropdown-padding-y: var(--header-search-pane-padding-y);
      --bs-dropdown-border-radius: var(--header-search-pane-border-radius);
      --bs-dropdown-min-width: calc(var(--header-search-pane-min-width) - var(--header-search-pane-spacer) * 2);

      &[data-bs-popper] {
        left: 0;
        right: 0;
        margin-left: var(--header-search-pane-margin-x);
        margin-right: var(--header-search-pane-margin-x);
      }

      max-width: var(--header-search-pane-max-width);
    }

    .btn-search {
      --bs-btn-border-color: var(--bs-border-color);
      --bs-btn-hover-bg: var(--bs-primary);
      --bs-btn-hover-border-color: var(--bs-primary);
    }
  }
}

.header:not(.header-translucent) + .section {
  margin-top: var(--header-height);
}

.footer {
  .nav-tabs {
    .nav-link {
      position: relative;

      &.active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 10px;
        border-color: transparent transparent #fff transparent;
        transform: translate(-50%, 1rem);
        animation: fade-in .15s ease-in .15s both;
      }
    }
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.section {
  --section-padding-y: 30px;
  --section-title-size: 24px;

  padding: var(--section-padding-y) 0;

  &-title {
    font-size: var(--section-title-size);
    font-weight: bold;
  }

  &-banner {
    // height: 100vh;
    min-height: 500px;
    color: #fff;
    @include bg-normal();
  }
}

@media screen and (min-width: 768px) {
  :root {
    --header-height: 86px;
  }

  .header {
    --header-padding-y: 10px;
    --header-logo-size: 40px;
  }

  .section {
    --section-padding-y: 50px;
    --section-title-size: 32px;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --header-height: 110px;
  }

  .header {
    --header-padding-y: 20px;
    --header-logo-size: 43px;
    --header-link-spacer-x: 16px;
    --header-search-pane-min-width: 800px;
    --header-search-pane-max-width: 800px;
    --header-search-pane-spacer: 20px;
    // --header-search-pane-padding-x: 20px;
    --header-search-pane-margin-x: auto;
    --header-search-pane-padding-y: 20px;
    --header-search-pane-border-radius: 16px;
  }

  .section {
    --section-padding-y: 80px;
    --section-title-size: 42px;
  }
}

@media screen and (min-width: 1200px) {
  .header {
    --header-padding-y: 20px;
    --header-logo-size: 43px;
    --header-link-spacer-x: 20px;
  }
}

@media screen and (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }
}
